<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- Required meta tags -->
  <title>Purple Admin</title>
  <th:block th:replace="librarian/common :: head"></th:block>
</head>

<body>
  <div class="container-scroller">
    <div th:replace="librarian/common :: navbar"></div>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <div class="row row-offcanvas row-offcanvas-right">
        <!-- partial:../../partials/_sidebar.html -->
        <th:block th:replace="librarian/common :: sidebar"></th:block>
        <div class="content-wrapper">
          <div class="row">
         <!--    <div class="col-md-6 d-flex align-items-stretch grid-margin">
              <div class="row flex-grow"> -->
                <div class="col-12 grid-margin">
                  <div class="card">
                    <div class="card-body">
                      <h4 class="card-title">Category Add</h4>
                      <p class="card-description">
                        Please add the category name at the form. 
                      </p>
                        <div class="form-group">
                          <label for="exampleInputEmail1">CategoryName</label>
                          <input type="text" class="form-control" id="register-email" placeholder="Enter the categoryName">
                        </div>
                       <!--  <div class="form-group">
                          <label for="exampleInputPassword1">Password</label>
                          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div> -->
                        <button type="submit" class="btn btn-success mr-2" onclick="insert()">Submit</button>
                       

                    </div>
                  </div>
                </div>
               
           
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->
        <div th:replace="librarian/common :: footer"></div>
        <!-- partial -->
      </div>
      <!-- row-offcanvas ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <div th:replace="librarian/common :: scripts"></div>
  <!-- End custom js for this page-->
  <script>
      function insert(){
        var categoryName = $("#register-email").val();
        
        let formData=new FormData();
        formData.append("categoryName", categoryName);

        $.ajax({
          url:"/api/category",
          type:"post",
          datatype:"json",
          data: formData,
          processData: false,
          contentType: false,
          success:function(resp){
                console.log(resp);
                alert("success");
            },
           error:function (resp) {      
               alert(resp.responseJSON.message);
            }
        });
      }
    </script>
</body>

</html>
